<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Canvas 绘制文字</title>
		<style>
			body {
				background: #666;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			canvas {
				background: #fff;
			}

			a {
				color: #fff;
				font-size: 24px;
			}
		</style>
	</head>

	<body>
		<div>
			<h1>绘制文字</h1>
			<canvas id="canvas1" width="500" height="500"></canvas>
			<script>
				let oCanvas = document.getElementById('canvas1');
				let ctx = oCanvas.getContext('2d'); //拿到画笔

				// 设置字体等属性 ,字体所占高度 === 字体大小/2
				ctx.font = 'bold 70px 宋体';

				// 文本的纵向对其方式 值为 start, center, end, left, right
				ctx.textAlign = 'start';

				// 文本的横向对其方式: 值为 top, bottom, middle 等
				// ctx.textBaseline = 'middle'

				ctx.fillStyle = 'red';

				// ctx.fillText('canvas', 250, 250)

				// ctx.strokeStyle = 'red'

				//  绘制一段文本的边框
				ctx.strokeText(
					'canvas', // 文字内容
					250,
					250, // 文字左上角 x y 坐标
					100 // 可选 绘制文本的最大宽度, 如果超过这个宽度 文本文本压扁
				);

				// 返回一些信息，比如绘制后的实际宽度
				const wid = ctx.measureText('canvas');

				ctx.fillText('canvas', 100, 200);
			</script>
		</div>
	</body>
</html>
